<template>
	<view class="signup">

		<view class="item-container" v-for="(item, index) of houseRecommendList" :key="index">
			<!-- 图片 -->
			<image @tap="goRouter(item.contractId)" class="item-image" :src="item.image[0]" mode="aspectFill"></image>

			<div class="left-item">
				<!-- 标题 -->
				<view class="item-title">{{ item.contractType }}</view>

				<!-- 描述 -->
				<view class="item-description">{{ item.description }}</view>

				<!-- 地址 -->
				<view class="item-address">{{ item.address }}</view>

				<!-- 特点 -->
				<view class="item-feature-box">
					<!-- <view class="item-feature" v-for="(feature, index) in item.features" :key="index">
						{{feature}}
					</view> -->
					<view class="item-feature">
						{{ item.nature }}
					</view>
					<view class="item-feature">
						{{ item.usageArea }}m²
					</view>
				</view>

				<!-- 价格 -->
				<view class="item-buttom">
					<view class="item-price">{{ item.price }}</view>
					<view class="item-unit">元/月</view>
					<button @tap="deleteC(item.contractId)">
						取消收藏
					</button>
				</view>

			</div>
			<!-- 分割线 -->
			<view class="item-divider"></view>

		</view>

	</view>

</template>

<script setup lang="ts">

import { getMyFavorites, deleteMyFavorites } from '../../services/myFavorites'
import type { PageParams, HouseDetailsPage } from '/@/types/global'

import { onMounted, ref } from 'vue'

// // 分页参数
const pageParams: PageParams = {
	pageNum: 1,
	pageSize: 5,
}
const deleteC = (contractId: number) => {
	uni.showModal({
		title: '取消收藏',
		content: '确认取消收藏么？',
		success: async function (res) {
			if (res.confirm) {
				const res = await deleteMyFavorites(contractId)
				houseRecommendList.value=houseRecommendList.value.filter(item => item.contractId !== contractId)
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		}
	});

}
const houseRecommendList = ref<HouseDetailsPage[]>([])
// // 获取推荐房源数据
const getHomehouseRecommendListData = async () => {

	const res = await getMyFavorites(pageParams)
	console.log(res.data)
	houseRecommendList.value = res.data.list

}

// // 组件挂载完毕
onMounted(() => {
	getHomehouseRecommendListData()
})
const goRouter = (contractId: number) => {
	console.log(contractId)
	uni.navigateTo({
		url: `/pages/contract/contractDetail?contractId=${contractId}`
	})

}
</script>

<style scoped lang="scss">
.item-container {
	width: 345px;
	height: 136px;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.item-image {
	width: 130px;
	height: 90px;
	margin-right: 10px 0px;
	border-radius: 5px;
	margin-right: 10px;
	margin-left: 10px;
}

.item-address {
	display: flex;
}

.item-title {

	color: #333333;
	font-size: 16px;
	line-height: 20px;

}

.item-description {
	font-size: 12px;
	color: #666;
	margin-bottom: 10px;
}

.item-address {
	font-size: 12px;
	color: #666;
	margin-bottom: 5px;
}

.item-feature-box {
	display: flex;
}

.item-feature {
	font-size: 11px;
	color: rgba(76, 95, 163, 0.698039215686274);
	line-height: 15px;
	width: 50px;
	text-align: center;
	margin: 0 5px;
	background-color: #edeff6;
}

.item-buttom {
	display: flex;
}

.item-price {
	font-size: 16px;
	color: #f00;
	margin-bottom: 5px;
}

.item-unit {
	font-size: 12px;
	color: #666;
}

.item-divider {
	border-top: 1px solid #eee;
	margin-top: 5px;
}

// 加载提示文字
.loading-text {
	text-align: center;
	font-size: 28rpx;
	color: #666;
	padding: 20rpx 0;
}
</style>